<!-- todo: styling, markup, css etc. - disposition according to project lib conventions -->
<div class="at-u-floatRight">
    <span ng-show="!vm.hideCounts" class="at-Panel-label">{{:: vm.strings.get('stats.PLAYS')}}</span>
    <span ng-show="!vm.hideCounts && vm.running" class="at-Panel-headingTitleBadge at-Panel-headingTitleBadge--inline">...</span>
    <span ng-show="!vm.hideCounts && !vm.running" class="at-Panel-headingTitleBadge at-Panel-headingTitleBadge--inline">{{ vm.plays || 0 }}</span>

    <span ng-show="!vm.hideCounts" class="at-Panel-label">{{:: vm.strings.get('stats.TASKS')}}</span>
    <span ng-show="!vm.hideCounts && vm.running" class="at-Panel-headingTitleBadge at-Panel-headingTitleBadge--inline">...</span>
    <span ng-show="!vm.hideCounts && !vm.running" class="at-Panel-headingTitleBadge at-Panel-headingTitleBadge--inline">{{ vm.tasks || 0 }}</span>

    <span ng-show="!vm.hideCounts" class="at-Panel-label">{{:: vm.strings.get('stats.HOSTS')}}</span>
    <span ng-show="!vm.hideCounts && vm.running" class="at-Panel-headingTitleBadge at-Panel-headingTitleBadge--inline">...</span>
    <span ng-show="!vm.hideCounts && !vm.running" class="at-Panel-headingTitleBadge at-Panel-headingTitleBadge--inline">{{ vm.hosts || 1 }}</span>

    <span class="at-Panel-label">{{:: vm.strings.get('stats.ELAPSED') }}</span>
    <span class="at-Panel-headingTitleBadge at-Panel-headingTitleBadge--inline">
        {{ (vm.elapsed * 1000 || 0) | duration: "hh:mm:ss"}}
    </span>

    <a aria-label="{{:: vm.strings.get('tooltips.DOWNLOAD_OUTPUT') }}" ng-show="vm.download && !vm.running" href="{{ vm.download }}?format=txt_download">
        <button class="btn at-Input-button at-u-noBorder"
            aria-label="Download output"
            aw-tool-tip="{{:: vm.strings.get('tooltips.DOWNLOAD_OUTPUT') }}"
            data-placement="top">
            <i class="fa fa-download"></i>
        </button>
    </a>

    <button class="btn at-Input-button at-u-noBorder"
        aria-label="{{:: vm.strings.get('stats.TOGGLE_EXPANDED_OUTPUT') }}"
        aw-tool-tip="{{ vm.tooltips.toggleExpand }}"
        data-tip-watch="vm.tooltips.toggleExpand"
        data-placement="top"
        ng-class="{'at-Input-button--active': vm.expanded}"
        ng-click="vm.toggleExpanded()">
        <i class="fa fa-arrows-alt"></i>
    </button>
</div>

<div class="HostStatusBar">
    <div class="HostStatusBar-ok"
        ng-show="!vm.running"
        data-placement="top"
        aw-tool-tip="{{ vm.tooltips.ok }}"
        data-tip-watch="vm.tooltips.ok"
        tooltip-outer-class="HostStatusBar-tooltip">
    </div>
    <div class="HostStatusBar-skipped"
        ng-show="!vm.running"
        data-placement="top"
        aw-tool-tip="{{ vm.tooltips.skipped }}"
        data-tip-watch="vm.tooltips.skipped"
        tooltip-outer-class="HostStatusBar-tooltip">
    </div>
    <div class="HostStatusBar-changed"
        ng-show="!vm.running"
        data-placement="top"
        aw-tool-tip="{{ vm.tooltips.changed }}"
        data-tip-watch="vm.tooltips.changed"
        tooltip-outer-class="HostStatusBar-tooltip">
    </div>
    <div class="HostStatusBar-failures"
        ng-show="!vm.running"
        data-placement="top"
        aw-tool-tip="{{ vm.tooltips.failures }}"
        data-tip-watch="vm.tooltips.failures"
        tooltip-outer-class="HostStatusBar-tooltip">
    </div>
    <div class="HostStatusBar-dark"
        ng-show="!vm.running"
        data-placement="top"
        aw-tool-tip="{{ vm.tooltips.dark }}"
        data-tip-watch="vm.tooltips.dark"
        tooltip-outer-class="HostStatusBar-tooltip">
    </div>
    <div class="HostStatusBar-noData"
        ng-show="vm.running"
        data-placement="top"
        aw-tool-tip="{{:: vm.tooltips.running }}"
        tooltip-outer-class="HostStatusBar-tooltip">
    </div>
    <div class="HostStatusBar-noData"
        ng-show="!vm.running && !vm.statsAreAvailable"
        data-placement="top"
        aw-tool-tip="{{:: vm.tooltips.unavailable }}"
        tooltip-outer-class="HostStatusBar-tooltip">
    </div>
</div>
